<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Three-Demo</title>

  <!-- JQ -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

  <style type="text/css">
    body {
      margin: 0;
      font-family: "tencent";
    }

    #canvas-frame {
      border: none;
      /* background-color: #eeeeee; */
    }

    .panel {
      border: 0;
      width: 270px;
      text-indent: 20px;
    }

    @font-face {
      font-family: "tencent";
      src: url("./assets/font/simhei.ttf");
    }
  </style>
</head>

<body>
  <div id="canvas-frame"></div>

  <!-- 精灵文字模板 -->
  <div class="panel" id="label1">
    <div class="panel-heading" style="background-color: rgba(161, 89, 41, 0.8); color: white;">
      专线网络接入区
    </div>
    <div class="panel-body" style="background-color: rgba(72, 58, 46, 0.8); color: white;">
      <p>区域机器总数：100</p>
      <p>高风险漏洞机器总数：10</p>
      <p>高风险漏洞机器占比：10%</p>
    </div>
  </div>
  <div class="panel" id="label2">
    <div class="panel-heading" style="background-color: rgba(161, 89, 41, 0.8); color: white;">
      移动网络接入区
    </div>
    <div class="panel-body" style="background-color: rgba(72, 58, 46, 0.8); color: white;">
      <p>区域机器总数：59</p>
      <p>低风险漏洞机器总数：5</p>
      <p>低风险漏洞机器占比：8%</p>
    </div>
  </div>

  <!-- 着色器 -->
  <script type="x-shader/x-vertex" id="vertexshader">
      varying vec2 vUv;
      void main() {
      	vUv = uv;
      	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    </script>
  <script type="x-shader/x-fragment" id="fragmentshader">
      uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;
      varying vec2 vUv;
      vec4 getTexture( sampler2D texelToLinearTexture ) {
      	return mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
      }
      void main() {
      	gl_FragColor = ( getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture ) );
      }
    </script>
  <!-- 发光材质着色器 -->
  <script id="vertexShader1" type="x-shader/x-vertex">
      varying vec3 vNormal;
      varying vec3 vPositionNormal;
      void main() 
      {
        vNormal = normalize( normalMatrix * normal ); // 转换到视图空间
        vPositionNormal = normalize(( modelViewMatrix * vec4(position, 1.0) ).xyz);
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    </script>
  <!-- fragment shader a.k.a. pixel shader -->
  <script id="fragmentShader1" type="x-shader/x-vertex">
      uniform vec3 glowColor;
      uniform float b;
      uniform float p;
      uniform float s;
      varying vec3 vNormal;
      varying vec3 vPositionNormal;
      void main() 
      {
        float a = pow( b + s * abs(dot(vNormal, vPositionNormal)), p );
        gl_FragColor = vec4( glowColor, a );
      }
    </script>
</body>

</html>